<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:choose>
<%-- 
	로그인이 되었을때 기본 적인 로직이 수행되고 
	로그인이 안되었을 때는 로그인을 수행하도록 페이지를 이동한다.
--%>
	<c:when test="${sessionScope.mvo!=null}">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript">
	$(document).ready(function(){
		
		$(".updateVal").click(function(){
			$(this).val("");
		});
		$(".edit").click(function(){
			$(this).next().next().toggle();// div .input
			
			$(".input").each(function(i){
				$(".form")[i].reset();
			});
			//$(".form")[1].reset();// form의 입력정보를 리셋
		});
		$(".cancelButton").click(function(){
			$(this).parent().parent().hide();// div .input
		});
		$(".saveButton").click(function(){
			
			var inputMember =$(this);
			var dataString ="id=java&membertype=t";
			var urlData ="";
			// label의 text값에 따라 넘겨지는 값이 다르도록 코드를 생성
			if($(this).parent().parent().parent().prev().prev().prev().text()=="이름"){
				dataString+="&name="+$("#userName").val();
				urlData="updateMember.do";
				$.ajax({
					type:"post",
					url:urlData,
					dataType:"json",
					data:dataString,
					success:function(jsonData){
						inputMember.parent().parent().parent().hide().prev().text(jsonData.name);
					}
				});
			}else if($(this).parent().parent().parent().prev().prev().prev().text()=="성별"){
				dataString+="&gender="+$("#userGender").val();
				urlData="updateMember.do";
				$.ajax({
					type:"post",
					url:urlData,
					dataType:"json",
					data:dataString,
					success:function(jsonData){
						inputMember.parent().parent().parent().hide().prev().text(jsonData.gender);
					}
				});
			}else if($(this).parent().parent().parent().prev().prev().prev().text()=="전화번호"){
				dataString+="&tel="+$("#userTel").val();
				urlData="updateMember.do";
				$.ajax({
					type:"post",
					url:urlData,
					dataType:"json",
					data:dataString,
					success:function(jsonData){
						inputMember.parent().parent().parent().hide().prev().text(jsonData.tel);
					}
				});
			}else if($(this).parent().parent().parent().prev().prev().prev().text()=="이메일 주소"){
				dataString+="&email="+$("#userEmail").val();
				urlData="updateMember.do";
				$.ajax({
					type:"post",
					url:urlData,
					dataType:"json",
					data:dataString,
					success:function(jsonData){
						inputMember.parent().parent().parent().hide().prev().text(jsonData.email);
					}
				});
			}else if($(this).parent().parent().parent().prev().prev().prev().text()=="소개"){
				dataString+="&intro="+$("#userIntro").val();
				urlData="updateTeacher.do";
				$.ajax({
					type:"post",
					url:urlData,
					dataType:"json",
					data:dataString,
					success:function(jsonData){
						inputMember.parent().parent().parent().hide().prev().text(jsonData.intro);
					}
				});
			}else if($(this).parent().parent().parent().prev().prev().prev().text()=="대학교"){
				dataString+="&university="+$("#userUniversity").val();
				urlData="updateTeacher.do";
				$.ajax({
					type:"post",
					url:urlData,
					dataType:"json",
					data:dataString,
					success:function(jsonData){
						inputMember.parent().parent().parent().hide().prev().text(jsonData.university);
					}
				});
			}else if($(this).parent().parent().parent().prev().prev().prev().text()=="희망 과목"){
				dataString+="&hopesubject="+$("#userHopesubject").val();
				urlData="updateTeacher.do";
				$.ajax({
					type:"post",
					url:urlData,
					dataType:"json",
					data:dataString,
					success:function(jsonData){
						inputMember.parent().parent().parent().hide().prev().text(jsonData.intro);
					}
				});
			}  
			
			//updateData($(this),urlData,dataString,sourceType);
		});
		$(".item").hover(
				function() {
					$(this).toggleClass("on");
				}
		);
		$(".input").hide();
	});
	
	
	// ajax 기능을 통합한 소스  jsonData parsing을 성공할 방법이 있다면 사용 예정;
	/* function updateData(inputMember,urlData,dataString,sourceType){
		//alert($("#userName").val());
		//var inputMember =$(this);
		$.ajax({
			type:"post",
			url:urlData,
			dataType:"json",
			data:dataString,
			success:function(jsonData){
				inputMember.parent().parent().hide().prev().text(jsonData.name);
			}
		}); 
	}*/
</script>   
    
<style>
	#profile_container{
				width:600px;
				margin:0px;
				border-bottom: thin;
				border-bottom-style: solid;
	}
	#basic {
				float: left;
				width: 299px; /* border의 길이와 합쳐서 300px;*/
				border-right: thin;
				border-right-style: solid;
				
	}
	#append{
				width: 299px;
				float: left;
				border-left: thin;
				border-left-style: solid;
	}
	.item{
				padding:26px;/* 각 항목 별 간격*/
	}
	.label{
				float: left;
				margin-right: 20px;
	}
	.edit{
				float: right;
	}
	.profileInfo{
				clear: both;
	}
	.input>input{
				color: gray;
	}
	.inputButton{
				float: right;
	}
	.on{
				background-color: silver;
	}
	.out{
				background-color: white;
	}
	
</style>
<div id="profile_container">
	<div id="picture" class="item">
	 <div class="label">사진</div><div class="edit">수정</div>
     <div class="profileInfo">${requestScope.mvo.originalfilename }</div>
	</div>
	<div id="basic">
		<div id="intro" class="item">
		<div class="label" >소개</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.intro }</div>
		 	<div id="inputIntro" class="input">
		 		<form class="form">
				 		<input class="updateVal" type="text" id="userIntro" value="정보를 입력하세요.">
			 		<div class="inputButton">
				 		<input class="saveButton" type="button" value="저장">
				 		<input class="cancelButton" type="button" value="취소">
				 	</div>
				</form>
		 	</div>
		</div>
		<div id="name" class="item">
		<div class="label">이름</div><div class="edit">수정</div>
		<div class="profileInfo">${requestScope.mvo.name }</div>
		 	<div id="inputName" class="input">
		 		<form class="form">
			 			<input class="updateVal" type="text" id="userName" value="이름은 무엇인가요?">
			 		<div class="inputButton">
				 		<input class="saveButton" type="button" value="저장">
				 		<input class="cancelButton" type="button" value="취소">
				 	</div>
				</form>
		 	</div>
		</div>
		<div id="gender" class="item">
		<div class="label">성별</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.gender }</div>
		 	<div id="inputGender" class="input">
		 		<form class="form">
				 		<input class="updateVal" type="text" id="userGender" value="성별이 무엇인가요?">
			 		<div class="inputButton">
				 		<input class="saveButton" type="button" value="저장">
				 		<input class="cancelButton" type="button" value="취소">
				 	</div>
				</form>
		 	</div>
		</div>
		<div id="tel" class="item">
		<div class="label">전화번호</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.tel }</div>
		 	<div id="inputTel" class="input">
		 		<form class="form">
				 		<input class="updateVal" type="text" id="userTel" value="전화번호는 무엇인가요?">
			 		<div class="inputButton">
				 		<input class="saveButton" type="button" value="저장">
				 		<input class="cancelButton" type="button" value="취소">
				 	</div>
				</form>
		 	</div>
		</div>
		<div id="email" class="item">
		<div class="label">이메일 주소</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.email }</div>
		 	<div id="inputEmail" class="input">
		 		<form class="form">
				 		<input class="updateVal" type="text" id="userEmail" value="이메일은 무엇인가요?">
			 		<div class="inputButton">
				 		<input class="saveButton" type="button" value="저장">
				 		<input class="cancelButton" type="button" value="취소">
				 	</div>
				</form>
		 	</div>
		</div>
		<div id="university" class="item">
		<div class="label">대학교</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.university }</div>
		 	<div id="inputUniversity" class="input">
		 		<form class="form">
				 		<input class="updateVal" type="text" id="userUniversity" value="출신 대학교는 어디인가요?">
			 		<div class="inputButton">
				 		<input class="saveButton" type="button" value="저장">
				 		<input class="cancelButton" type="button" value="취소">
				 	</div>
				</form>
		 	</div>
		</div>
	</div>
	<div id="append">
		<div id="hoperegion" class="item">
		<div class="label">희망 지역</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.hoperegion }</div>
		</div>
		<div id="hopesubject" class="item">
		<div class="label">희망 과목</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.hopesubject }</div>
		 	<div id="inputUniversity" class="input">
			 	<form class="form">
			 		<select id = "userHopesubject">
						<option value = "">--</option>
					</select>	
				 	<div class="inputButton">
					 	<input class="saveButton" type="button" value="저장">
					 	<input class="cancelButton" type="button" value="취소">
					</div>
				</form>
			</div>
		</div>
		<div id="hopegender" class="item">
		<div class="label">희망 학생성별</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.hopegender }</div>
		</div>
		<div id="availablestudent" class="item">
		<div class="label">수업 가능한 학생</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.availablestudent }</div>
		</div>
		<div id="availableday" class="item">
		<div class="label">수업 가능한 시간-요일</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.availableday }</div>
		</div>
		<div id="availabletime" class="item">
		<div class="label">수업 가능한 시간</div><div class="edit">수정</div>
		 <div class="profileInfo">${requestScope.mvo.availabletime }</div>
		</div>
	</div>
</div>
</c:when>
	<c:otherwise>
			<script type="text/javascript">
				var path ="profile/profile.mypage";
				location.href="loginResult.do?path="+path;
			</script>
	</c:otherwise>
</c:choose>